<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-card-header">
                        <div class="layui-row" id="title-label">
                        </div>
                    </div>
					
					<div class="layui-card-body">
						<form class="layui-form" action="" accept-charset="UTF-8" method="post" id="base_form"
						      lay-filter="base_form">
						    <input id="at_id" type="hidden" name="id">
						    <div class="layui-form-item">
						        <label class="layui-form-label">标题</label>
						        <div class="layui-input-block">
						            <input type="text" name="imgName" required placeholder="不超过50个字" maxlength="50"
						                   autocomplete="off" class="layui-input">
						        </div>
						    </div>
							<!-- lay-verify="required"  必填-->
							<div class="layui-form-item">
							    <label class="layui-form-label">副标题</label>
							    <div class="layui-input-block">
							        <input type="text" name="subtitle" required placeholder="不超过100个字" maxlength="100"
							               autocomplete="off" class="layui-input">
							    </div>
							</div>
							
							
							<div class="layui-form-item">
							    <label class="layui-form-label">图片链接</label>
							    <div class="layui-upload">
							        <button type="button" class="layui-btn layui-btn-normal" id="test1_hash">上传图片</button>
							        <div class="layui-upload-list">
							            <img class="layui-upload-img" id="demo1_hash" style="width:10%;margin-left:10%">
							            <p id="demoText_hash"></p>
							        </div>
							    </div>
							</div>
							
							<div class="layui-form-item">
							    <label class="layui-form-label">类别</label>
							
								<div class="layui-input-block">
									<select name="type" lay-filter="showType">
										<option value="0" selected="">无</option>
										<option value="1">跳转网址</option>
									</select>
								</div>
							</div>
							
							<div class="layui-form-item" hidden="" id="url-div">
							    <label class="layui-form-label">跳转网址url</label>
							    <div class="layui-input-block">
							        <input type="text" name="url" placeholder="http://或https://开头"
							               autocomplete="off" class="layui-input" maxlength="200">
							    </div>
							</div>
							
							<div class="layui-form-item">
							    <label class="layui-form-label">优先级</label>
							    <div class="layui-input-block">
							        <input type="number" name="sort" placeholder="输入数字,数字越大,显示越靠前" maxlength="8"
							               autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace('.','')"
											onafterpaste="this.value=this.value.replace('.','')">
							    </div>
							</div>
							
							<div class="layui-form-item">
							    <label class="layui-form-label">显示状态</label>
							
								<div class="layui-input-block">
									<select name="state">
										<option value="0">不显示</option>
										<option value="1" selected="">显示</option>
									</select>
								</div>
							</div>
							
						    <div class="layui-form-item">
						        <div class="layui-input-block">
						            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">保存</button>
						        </div>
						    </div>
						</form>
					</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
	
    layui.config({
        base: '/src/js/'
    }).use(['admin', 'jquery', 'mockjs', 'table', 'sidebar', 'form','upload'], function () {
        var $ = layui.jquery,
            admin = layui.admin,
            layer = layui.layer,
            table = layui.table,
            sidebar = layui.sidebar,
            form = layui.form,
			upload = layui.upload;
		var isAdd = true;
		var id = getUrlParam("id");
		var imgUrl;
		form.render();
		if (id != undefined && id != "") {
			$("#title-label").text('修改轮播图');
		    $("#at_id").val(id);
		    isAdd = false;
			var index = layer.load(2);
		    httpPost(GET_BANNER_INFO, {id: id}, function (results) {
				layer.close(index);
		        form.val("base_form", {
		            "imgName": results.imgName,
		            "url": results.url,
		            "sort": results.sort,
		            "type": results.type,
					"state": results.state,
					"imgUrl": results.imgUrl,
					"subtitle": results.subtitle
		        });
		        imgUrl = results.imgUrl;
		        $('#demo1_hash').attr('src', results.imgUrl);
		    }, function (message) {
				layer.close(index);
		    });
		}else{
			$("#title-label").text('新增轮播图');
		}
		
		form.on('submit(save)', function (data) {
			
			var url;
			if (isAdd) {
			    url = ADD_BANNER;
			} else {
			    url = UPDATE_BANNER;
			}
			var params = data.field;
			if(params.imgName.length > 50){
				layer.msg('标题不能超过50个字');
				return false;
			}
			if(params.subtitle.length > 100){
				layer.msg('副标题不能超过100个字');
				return false;
			}
			
			
			if(params.sort && params.sort.length > 5){
				layer.msg('优先级过大');
				return false;
			}
			params.imgUrl = imgUrl;
		    
			var index = layer.load(2);
			httpPost(url, params, function (results) {
				if (isObjNull(id)) {
					layer.msg("添加成功");
					window.history.go(-1);
					// window.location.href="javascript:history.go(-1)";
				}else{
					layer.msg("修改成功");
				}
				
				layer.close(index);
				
			    
			}, function (message) {
				layer.close(index);
			});
			
		    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
		
		form.on('select(showType)', function(data){
		  if(data.value == 1){
			  $("#url-div").show();
		  }else{
			  $("#url-div").hide();
		  }
		}); 
			 
		//普通图片上传
		var uploadInst = upload.render({
		    elem: '#test1_hash',
		    url: UPLOAD_IMAGE + "?width=800",
		    before: function (obj) {
		        //预读本地文件示例，不支持ie8
		        obj.preview(function (index, file, result) {
		            $('#demo1_hash').attr('src', result); //图片链接（base64）
		        });
		    },
			exts: 'jpg|png|jpeg',
		    done: function (res) {
		        //如果上传失败
		        if (res.status > 0) {
		            return layer.msg('上传失败');
		        }
				
		        //上传成功
		        imgUrl = res.data.src;
		
		    },
		    error: function () {
		        //演示失败状态，并实现重传
		        var demoText = $('#demoText_hash');
		        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
		        demoText.find('.demo-reload').on('click', function () {
		            uploadInst.upload();
		        });
		    }
		});
			
    });


</script>

<style scoped>

</style>
